<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

import request from '@/utils/request'
const router = useRouter()

const key = ref('')

const doLogin = () => {
  request('/login', { password: key.value }, 'POST').then((data) => {
    ElMessage.success({ message: '登录成功:' + data })
    localStorage.setItem('Access-Token', data)
    router.replace({
      path: '/home'
    })
  })
}
</script>

<template>
  <el-card style="max-width: 480px">
    <template #header>
      <div class="card-header">
        <span>后台登录</span>
      </div>
    </template>
    <div>
      <el-input
        type="password"
        v-model="key"
        style="width: 240px"
        placeholder="请输入登录密钥"
        show-password
      />
      <el-button @click="doLogin" type="danger">进入</el-button>
    </div>
  </el-card>
</template>

<style scoped>
.el-card {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 480px;
}
</style>
